// Vue类
class Vue {
  // 构造函数
  constructor (options) {
    // 存储传进来的参数
    this.$options = options || {}
    this.$data = options.data || {}
    this.$methods = options.methods || {}
    // 判断当前是个选择器还是元素
    this.$el =
      typeof options.el === "string"
        ? document.querySelector(options.el)
        : options.el
    
    // 调用方法把data中的根节点变为响应式的
    this._proxyData(this.$data)
    // 把menthods也编程响应式的
    this._proxyData(this.$methods)
    // 调用observer的实例
    new Obsercer(this.$data)

    new Obsercer(this.$methods)

    // 调用compiler的实例进行compile
    new Compiler(this)
  }

  // 把数据转换为响应式的
  _proxyData (data) {
      // 把数据转换为响应式的
      Object.keys(data).forEach(key => {
          Object.defineProperty(this,key,{
              // 可枚举
              enumerable:true,
              // 可修改
              configurable:true,
              get () {
                  return data[key]
              },
              set (newValue) {
                  if (newValue === data[key]){
                      return
                  } 
                  data[key] = newValue
              }
          })
      })
  }
}
